<template>
  <el-main v-loading="open" element-loading-background="rgba(243,244,247,1)">
    <el-card>
      <!-- 搜索框区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input clearable placeholder="请输入内容" prefix-icon="el-icon-search" v-model="pageInfo.qurey" @clear="getOrdersList"> </el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="getOrdersList">查询</el-button>
        </el-col>
      </el-row>

      <!-- 订单表格区域 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="id" label="订单号" width="150"> </el-table-column>
        <el-table-column label="订单状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.repairStatus == 0">待维修</span>
            <span v-else>已完成维修</span>
          </template>
        </el-table-column>
        <el-table-column prop="repairName" label="用户" width="100"> </el-table-column>
        <el-table-column prop="repairPhone" label="手机号" width="120"> </el-table-column>
        <el-table-column prop="repairAddress" label="地址" width="300"> </el-table-column>
        <el-table-column prop="repairText" label="故障描述" width="200"> </el-table-column>
        <el-table-column prop="createTime" label="提交时间" width="180"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" class="edit" @click="editOrders(scope.row)">确认维修完成</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="table">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'RepairOrder',
  data() {
    return {
      open: true,
      total: 0,
      pageInfo: {
        //模糊查询的数据
        qurey: '',
        //当前页数
        pageNum: 1,
        //每页显示的数据条数
        pageSize: 5,
      },
      tableData: [],
      //更改状态的表单
      editFrom: [],
      info: [],
    };
  },

  created() {
    this.openFullScreen();
    this.getOrdersList();
    this.info = JSON.parse(window.localStorage.getItem('userinfo'));
  },

  methods: {
    openFullScreen() {
      this.open = true;
      setTimeout(() => {
        this.open = false;
      }, 1000);
    },
    //获取所有订单信息列表
    async getOrdersList() {
      const { data: res } = await this.$http.get('repairOrders/getOrdersList', {
        params: this.pageInfo,
      });
      if (res.code == 1) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    handleSizeChange(newSize) {
      this.pageInfo.pageSize = newSize;
      this.getOrdersList();
    },

    handleCurrentChange(newPageNum) {
      this.pageInfo.pageNum = newPageNum;
      this.getOrdersList();
    },
    //更改订单状态
    async editOrders(repairInfo) {
      this.editFrom = repairInfo;
      this.editFrom.repairStatus = 1;
      this.editFrom.userName = this.info.userName;
      const { data: res } = await this.$http.put('repairOrders/updateOrders', this.editFrom);
      if (res.code == 1) {
        this.getOrdersList();
        return this.$message.success(res.data);
      } else {
        return this.$message.error('订单状态更新失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 20px;
}
.edit {
  color: #419eff;
  font-size: 13px;
}
.table {
  display: flex;
  justify-content: space-evenly;
  margin-top: 25px;
}
.edit {
  color: #419eff;
  font-size: 13px;
}
.el-main {
  padding: 0px;
}
</style>